---
import '@/styles/globals.css'
import { Button } from '@/components/ui/button';
import { Header } from '@/components/Header';
import ApiTokenMissingCard from '@/components/admin/api-token-missing-card';

const currentPath = Astro.url.pathname;
const title = Astro.props.title || 'SaaS Admin Template';
const { API_TOKEN } = Astro.locals.runtime.env;
const apiTokenSet = API_TOKEN && API_TOKEN !== '';
---

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme');
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  };
  const isDark = getThemePreference() === 'dark';
  document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
 
  if (typeof localStorage !== 'undefined') {
    const observer = new MutationObserver(() => {
      const isDark = document.documentElement.classList.contains('dark');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
    });
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
  }
</script>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title ? `${title} - SaaS Admin Template` : 'SaaS Admin Template'}</title>
  </head>
  <body>
    <Header currentPath={currentPath} />
    <div class="flex-1 space-y-4 p-8 pt-6">
      <div class="mb-4">
        {!apiTokenSet && <ApiTokenMissingCard />}
      </div>
      <div class="flex items-center justify-between">
        <h2 class="text-3xl font-bold tracking-tight">{title}</h2>
        <slot name="actions" />
      </div>
      <slot />
    </div>
  </body>
</html>

